<template>
    <div class="designer-btns">
        <div class="pull-left">
            <ul>
                <li>
                    <img src="@/assets/img/station-ui/上一步.png"
                         alt="">
                    <p>上一步</p>
                </li>
                <li>
                    <img src="@/assets/img/station-ui/下一步.png"
                         alt="">
                    <p>下一步</p>
                </li>
            </ul>
        </div>
        <div class="pull-right">
            <!-- <div class="split-line"></div> -->
            <ul>
                <li @click="onReturn()">
                    <img src="@/assets/img/station-ui/返回.png"
                         alt="返回">
                    <p>返回</p>
                </li>
                <li class="bg-blue"
                    @click="saveStationFlowData()">
                    <img src="@/assets/img/station-ui/保存.png"
                         alt="保存">
                    <p>保存</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TopBtn',

    data() {
        return {
        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style scoped lang="scss">
.designer-btns {
    overflow: hidden;
    border: 1px solid #dedede;
    display: flex;
    justify-content: space-between;
    ul {
        overflow: hidden;
        padding: 0;
        margin: 0;
        padding-left: 10px;
        li {
            float: left;
            width: 70px;
            padding: 0 10px 4px;
            text-align: center;
            cursor: pointer;
            color: #2a2a2a;
        }
    }
    .pull-right {
        .bg-blue {
            color: #fff;
            border-radius: 5px;
            background: linear-gradient(180deg, #609be5, #2c66ae 51%, #053b7e);
        }
    }
}
</style>
